<template>
  <div class="Default-template">
    <div class="store-sign yh-layout-box" v-if="signBoard">
      <img :src="URL.PIC+signBoard" width="100%" height="108">
    </div>
    <NavList index="index" v-if="info && goodsClassify" :factoryId="info.id" :classify="goodsClassify" />
    <div class="store-swiperBanner" v-if="banners && banners.length > 0">
      <Carousel :banners="banners" />
    </div>

    <Xlist />

    <div class="sell-well" v-if="sellWell && sellWell.length > 0">
      <div class="d-title">
        热销商品
      </div>
      <div class="yh-layout-box">
        <div class="temp-carousel" v-if="sellWell.length>4">
          <ul class="temp-carousel__indicators">
            <li class="temp-carousel__indicator"  @click="handelTemp(0)">
              <button class="temp-carousel__button" :class="activeHot===1?'temp-active':''"></button>
            </li>
            <li class="temp-carousel__indicator" @click="handelTemp(4)">
              <button class="temp-carousel__button" :class="activeHot===2?'temp-active':''" ></button>
            </li>
          </ul>
        </div>
        <div class="sell-well-wrap">
          <div :class="'sell-well-box cursor sell-well-box'+(index+1)" v-for="(i, index) in hotList"
           @click="routeToPath('/product/'+i.productId, 'new')">
            <img :src="URL.PIC+i.mainImgPath">
        </div>
      </div>
    </div>
    </div>
    <div class="category" v-if="classifyCustom && classifyCustom.length > 0">
      <div class="yh-layout-box">
        <div class="category-wrap">
          <div class="" v-for="(i, index) in classifyCustom">
            <div class="d-title">
              {{ i.classifyName }}
            </div>
            <ul>
              <li class="common-goods-item" v-for="good in i.goods" @click="routeToPath('/product/'+good.productId, 'new')">
                <div class="cgitem-pic">
                  <img class="maxs" :src="URL.PIC+good.productImage">
                </div>
                <div class="cgitem-title">
                  {{ good.productTitle }}
                </div>
                <div class="cgitem-price">
                  ￥{{ good.specification.sellingPrice }}
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="introduction" v-if="info">
      <div class="brief">
        <div class="brief-wrap">
          <h3>{{ info.factoryName }}</h3>
          <div class="info-introduction">
            <p>{{ info.introduction }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavList from '../components/NavList'
import { getFactoryPromotion, getFactoryClassifyCustom, getFactoryProducts, getFactoryBannerSelect, getFactorySignBoard } from '@/api/factory'
import Carousel from '../components/Carousel'
import Xlist from '../components/Xlist'

export default {
  props: ['info', 'goodsClassify'],
  components: {
    NavList,
    Carousel,
    Xlist,
  },
  data() {
    return {
      factoryId: this.$route.params.factoryId,
      sellWell: null,
      classifyCustom: [],
      classifyGoods: [],
      banners: null,
      signBoard: null,
      activeHot: 1,
      hotList: null,
    }
  },
  created() {
    this.getFactoryPromotion()
    this.getFactorySignBoard()
    this.getFactoryBannerSelect()
    this.getFactoryClassifyCustom()


  },
  methods: {
    shopList(val){
      if(val.length>4){
        this.handelTemp(4);
        this.activeHot = 2;
      }else{
        this.handelTemp(0);
        this.activeHot = 1;
      }
    },
    // 切换队列
    handelTemp(index){
      if(index == 0){
        this.hotList = this.sellWell.slice(0, 4);
        this.activeHot = 1;
      }else{
        this.hotList = this.sellWell.slice(4);
        this.activeHot = 2;
      }
    },
    // 店招
    getFactorySignBoard() {
      getFactorySignBoard({factoryId: this.factoryId, terminal: 'PC'}).then(res=>{
        this.signBoard = res.data;
      })
    },
    // BANNER
    getFactoryBannerSelect() {
      getFactoryBannerSelect({factoryId: this.factoryId, terminal: 'PC'}).then(res=>{
        this.banners = res.data;
      })
    },
    // 热销商品
    getFactoryPromotion() {
      getFactoryPromotion({factoryId: this.factoryId, positionCode: 'HOTS'}).then(res=>{
        this.sellWell = res.data;
        this.hotList = this.sellWell.slice(0, 4);
        console.log(this.hotList);

        if(this.sellWell.length > 4){
          var that = this;
          var wxUserInfo;
          var times;
          times = setInterval(getUser, 5000);
          var timesNum = 0;
          function getUser() {
            if(timesNum == 4){
              timesNum = 0
              that.handelTemp(0)
            }else{
              timesNum = 4
              that.handelTemp(4)
            }
          }
        }

      })
    },
    // 品类
    getFactoryClassifyCustom() {
      getFactoryClassifyCustom({factoryId: this.factoryId}).then(res=>{
        this.getFactoryProducts(res.data)
      })
    },
    // 品类商品
    getFactoryProducts(classifyCustom) {
      var that = this;
      async function doIt() {
        for (var i = 0; i < classifyCustom.length; i++) {
            const body = await new Promise((resolve, reject) => {
                getFactoryProducts({factoryId: that.factoryId,
                  classifyId: classifyCustom[i].classifyId,
                  size: 100,
                  page: 1,
                  sort: 'desc',
                }).then(res=>{
                  resolve(res);
                })
            });
            that.classifyGoods.push(body.data.list)
            that.ProductsList(classifyCustom, that.classifyGoods)
        }
    }

    doIt();
    },
    // 把品类和商品放在一个数组里面
    ProductsList(classifyCustom, classifyGoods) {
      for (var idx in classifyCustom) {
        classifyCustom[idx].goods = classifyGoods[idx]
      }
      this.classifyCustom = classifyCustom
    }
  }
}
</script>

<style lang="scss" scoped>
.temp-carousel{
  float:right;
  margin-right: -50px;
  margin-top: -40px;
  .temp-carousel__indicators{
    list-style: none;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    z-index: 2;
    .temp-carousel__indicator{
      display: inline-block;
      background-color: transparent;
      padding: 12px 0px;
      cursor: pointer;
      margin-right: 10px;
      .temp-carousel__button{
        display: block;
        opacity: .6;
        width: 30px;
        height: 8px;
        background-color: #ddd;
        &.temp-active{
          background-color: black;
        }
        border: none;
        outline: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
      }

    }

  }

}
@import '@/styles/pages/template.scss';
.info-introduction{

}
</style>
